<template>
  <div class="box">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="a"></el-tab-pane>
        <el-tab-pane label="未读" name="b"></el-tab-pane>
        <el-tab-pane label="已读" name="c"></el-tab-pane>
      </el-tabs>
    </div>
    <el-card>
      <div class="left">
        <img src="@/assets/logo/u155.svg" alt="" />
      </div>
      <div class="right">
        <div class="content">
          <div class="header">
            <span>化贝信息中心</span>
            <el-button size="mini">未读</el-button>
          </div>
          <div class="footer">
            <span>尊敬的王先生，你有一个待办信息，请及时处理 </span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "a",
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .top {
    height: 60px;
  }
  .el-card {
    height: calc(100% - 60px);
    ::v-deep .el-card__body {
      display: flex;
      .right {
        margin-left: 20px;
        .content {
          .header {
            span {
              margin-right: 10px;
            }
            .el-button {
              width: 60px;
              // height: 23px;
              font-weight: 400;
              font-size: 13px;
              color: #ffffff;
              border-radius: 5px;
              background-color: rgba(55, 48, 237, 1);
            }
          }
        }
      }
    }
  }
}
</style>
